<script setup lang="ts" name="playground">
import { ref } from 'vue'
const boo = ref(false)
</script>
<template>
  <transition name="cus">
    <div class="box" v-if="boo"></div>
  </transition>
  <br>
  <br>
  <transition>
    <div class="box" v-if="boo"></div>
  </transition>
  <button @click="boo = !boo">切换</button>
</template>
<style scoped>
/* transition 处理不存在的元素, 没有过渡效果的 */
/* transition组件是vue内置的动画组件
  如果在vue中想要给某个元素添加过 可以使用transition标签做包裹(注意点: transition只能包裹一个根元素)
  只要添加了trantion标签包裹， vue就帮我们内置了6个类名
  进入
  v-enter-from 进入前
  v-enter-active 进入期间
  v-enter-to 进入后
  离开 
  v-leave-from 离开前
  v-leave-active 离开期间
  v-leave-to 离开后

  多个元素区分动画  在transition标签上添加name属性  定义的类名  name-xxxxx
*/
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  /* transition: all 3s; */
}

.v-enter-from {
  width: 0;
  height: 0;
  border-radius: 0;
}

.v-enter-active {
  transition: all 2s
}

.v-enter-to {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}


.v-leave-from {
  width: 100px;
  height: 100px;
}

.v-leave-active {
  transition: all 1s;
}

.v-leave-to {
  width: 0;
  height: 0;
}

.cus-enter-from {
  width: 0;
  height: 0;
  box-shadow: 0;
}

.cus-enter-active {
  transition: all 2s
}

.cus-enter-to {
  width: 100px;
  height: 100px;
  box-shadow: 10px 10px 10px pink;
}


.cus-leave-from {
  width: 100px;
  height: 100px;
}

.cus-leave-active {
  transition: all 1s;
}

.cus-leave-to {
  width: 0;
  height: 0;
}
</style>